<template>
	<view class="container bg-zhuti">
		<cu-custom bgColor="" :isBack="false">
			<block slot="content"><text class="text-white">聚力迎春</text></block>
		</cu-custom>	
		<view class="posBox flex justify-between align-center">
			<view class="jdText">
				<cmd-notice-bar  scrollable :text="baseForm.luck_start"></cmd-notice-bar>
			</view>
			<view class="topText">{{baseForm.start_flag}}</view>
		</view>
		<view class="flex justify-center topImage">
			<image src="../../static/index.png" mode="widthFix"></image>
		</view>
		<view class="TableSelect flex align-center">
			<view class="TableItem flex justify-center flex-direction align-center" v-for="(item,index) in baseForm.ren_qi">
				<image src="../../static/circle.png" mode="widthFix" class="img"></image>
				<view class="title">{{item.province}}</view>
				<view class="text">{{item.rq_qty}}</view>
			</view>								
		</view>
		<view class="padding-xs margin-top rela" @click="startJs">
			<view class="text">开始竞赛</view>
			<image src="../../static/indexline.png" mode="widthFix"></image>
		</view>
		<view style="padding: 0 23upx;padding-bottom: 40upx;">
			<view class="gzsm">
				<image src="../../static/hdgz.png" mode="widthFix" class="hdimg"></image>
				<view class="gztext">
					一、	活动时间：2021年2月12日-2月18日</br>
					二、	参与人群：吉利汽车营销一公司中部战区</br>
					三、	参与方法：点击参与“开始竞赛”注册登录参与</br>
					四、	抽奖规则</br>
					①	抽奖时间：大年初一至初七，每天10:00-17:00</br>
					②	抽奖机会：每人每天1次抽奖机会，共计7次/人</br>
					③	奖品数量：300个吉利吉盒</br>
					④	奖品领取：中奖者需在个人中心支付20.21元，用于邮寄吉盒</br>
					五、人气助力</br>
					①活动期间，参与者每天可以邀请好友助力，增加个人所在省份人气值</br>
					②人气值第一的省份，吉利汽车营销一公司中部战区额外发放60个吉利吉盒</br>
					③活动期间，参与者助力和邀请助力不限时、不限量</br>
				</view>
				<!-- <image src="../../static/indexgz.png" mode="widthFix"></image> -->
			</view>
		</view>
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<!-- <image src="/static/logo.png" mode="aspectFit"></image> -->
			<view class="gray-text">加载中...</view>
		</view>		
	</view>
</template>

<script>
	import cmdNoticeBar from "@/components/cmd-notice-bar/cmd-notice-bar.vue"
	import { mapMutations } from 'vuex'

	export default {
		components:{
			    cmdNoticeBar
		},
		data() {
			return {
				loading:false,
				baseForm:{
					ren_qi:[],
					luck_start:""
				}
			};
		},
		onLoad() {
			// this.getBase()
		},
		onShow() {
			this.getBase()
		},
		methods: {
			...mapMutations(['login']),
			// 基础信息
			getBase(){
				this.$ComFunJS.ajax({
					method:'get',
					url:"/api/v1.0/base/client",
					success:(res)=>{
						if(!res.data.error){
							this.baseForm = res.data.result;
						}
					}
				})
			},
			// 开始竞赛
			async startJs(){
				this.loading  = true;
				this.$ComFunJS.beforeLogin().then((res)=>{
					this.loading  = false;
					if(res.result.token){
						this.login(res.result.token)
						uni.navigateTo({
							url:'/pages/person/index'
						})
					}else{
						uni.navigateTo({
							url:`/pages/register/index?openid=${res.result.openid}`
						})						
					}
				});
				
			},
		},

	}
</script>

<style lang="scss">

	.bg-zhuti{
		background: #F65047;
	}
	.posBox{
		position: absolute;
		width: 100%;
	}
	.jdText{
		width: 80%;
	}
	.topText{
		width: 108upx;
		height: 35upx;
		line-height: 35upx;
		background: #FF8927;
		border: 2upx solid #FBCA8F;
		border-bottom-left-radius: 16upx;
		border-top-left-radius: 16upx;
		font-size: 24upx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		text-align: center;
		color: #FFFFFF;
		z-index: 99;
	}
	.gzsm{
		position: relative;
		width: 100%;
		background: rgba(245, 146, 137, 1);
		padding: 18upx;
		border-radius: 16px;
		.gztext{
			width: 100%;
			background: #FFFBF2;
			box-sizing: border-box;
			box-shadow: 0px 7px 22px 2px rgba(247, 81, 71, 0.4);
			border-radius: 16px;
			padding: 77upx 32upx 34upx 24upx;
			font-size: 26upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #646464;
			line-height: 51upx;			
		}
		.hdimg{
			width: 278upx;
			position:absolute;
			top:0upx;
			margin: 0 auto;
			left: 0;
			right: 0;
		}
	}
	.topImage{
		position: absolute;
		width: 100%;
		top: 20upx;
	}
	.rela{
		position: relative;
		.text{
			font-size:32upx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #FFFBF2;
			position:absolute;
			z-index: 99;
			text-align: center;
			letter-spacing: 4upx;
			width: 100%;
			top: 0;
			z-index: 99;
			line-height: 117upx;			
		}

	}
	.TableSelect{
		padding: 0 20upx;
		.TableItem{
			width: 25%;
			position: relative;
			.img{
				width: 180upx;
			}
			.title{
				font-size: 28upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFF2B5;
			}
			.text{
				position: absolute;
				width: 100%;
				top: 0;
				height: 180upx;
				line-height: 180upx;
				text-align: center;
				font-size: 32upx;
				font-family: Arial;
				font-weight: 600;
				color: #FFF2B5;
			}
		}
		margin-top: 300upx;
	}
</style>
